<template>
  <div class="h-100 ">
    <!-- 头部 开始 -->
    <my-header />
    <!-- 头部 结束 -->
    <!-- 监测 开始 -->
    <div class="h-89  " style="margin-top:2vh">
      <div style="width:20%;height:100%" class="f-l ">
        <!-- 监测 结束 -->

        <div class="card bg on" style="width:100%" @click="goBack">
          <img src="~@/assets/img/left.png" style="vertical-align: middle; padding-bottom:6px" alt=""> <span data-index="0" class="myfont">企业环境监测</span>
        </div>
        <div class="navLeft">

          <div v-for="item in itemList" :key="item.id" class="card " :class="typeCode == item.id? 'on':''" @click="changeNav(item.id)">
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
      <div class="chart-box f-r" style="width:78%;height:100%">
        <div data-bottom class="timer flex flex-center">
          <span>{{ dateVal }}</span>
          <img src="~@/assets/sheep/riqi.png" alt="">
          <el-date-picker
            v-model="dateVal"
            type="date"
            format="yyyy-MM-dd"
            popper-class="date-style"
            value-format="yyyy-MM-dd"
            :clearable="false"
            @change="handleDate"
          />
        </div>

        <div style="width:100%;height:auto;" class="boxbg">
          <div class=" title">
            奶山羊生长情况监测
          </div>
          <div class="charts">
            <div class="chart">
              <v-chart v-if="option1.isShow" :options="option1" />
            </div>
            <div class="chart">
              <v-chart v-if="option2.isShow" :options="option2" />
            </div>
            <div class="chart">
              <v-chart v-if="option3.isShow" :options="option3" />
            </div>
            <div class="chart">
              <v-chart v-if="option4.isShow" :options="option4" />
            </div>

          </div>
        </div>
        <div style="width:100%;height:auto;padding-bottom:20px;box-sizing:border-box" class="boxbg">
          <div class=" title" style="margin-bottom:20px">
            羊舍空气质量
          </div>
          <div class="flex tabs" style="height:64px">
            <div class="tab ">
              <img src="@/assets/sheep/tab1.png" alt="">
              <div class="tab-html  ">
                <div>温度</div>
                <div class="flex">
                  <span> {{ airInfo.info1 }}</span> <small>℃</small>
                </div>
              </div>
            </div>
            <div class="tiao" />

            <div class="tab ">
              <img src="@/assets/sheep/tab2.png" alt="">
              <div class="tab-html  ">
                <div>湿度</div>
                <div class="flex">
                  <span> {{ airInfo.info2 }}</span> <small>%</small>
                </div>
              </div>
            </div>
            <div class="tiao" />

            <div class="tab ">
              <img src="@/assets/sheep/tab3.png" alt="">
              <div class="tab-html  ">
                <div>光照</div>
                <div class="flex">
                  <span> {{ airInfo.info3 }}</span> <small>KLux</small>
                </div>
              </div>
            </div>
            <div class="tiao" />
            <div class="tab ">
              <img src="@/assets/sheep/tab4.png" alt="">
              <div class="tab-html  ">
                <div>二氧化碳</div>
                <div class="flex">
                  <span> {{ airInfo.info4 }}</span> <small>ppm</small>
                </div>
              </div>
            </div>
            <div class="tiao" />
            <div class="tab ">
              <img src="@/assets/sheep/tab5.png" alt="">
              <div class="tab-html  ">
                <div>氨气</div>
                <div class="flex">
                  <span> {{ airInfo.info5 }}</span> <small>mg/m³</small>
                </div>
              </div>
            </div>
            <div class="tiao" />
            <div class="tab ">
              <img src="@/assets/sheep/tab6.png" alt="">
              <div class="tab-html  ">
                <div>硫化氢</div>
                <div class="flex">
                  <span> {{ airInfo.info6 }}</span> <small>mg/m³</small>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="width:100%;height:auto;" class="boxbg">
          <div class=" title" style="width:100%; padding:20px 0 20px 10px;box-sizing:border-box">
            羊舍监控画面
          </div>
          <div class="kong">
            <div class="video" @click="showPop">
              <img src="@/assets/sheep/video.png" class="img" alt="">
              <img src="@/assets/sheep/play.png" alt="" class="play">
            </div>
            <div class="video" @click="showPop">
              <img src="@/assets/sheep/video.png" class="img" alt="">
              <img src="@/assets/sheep/play.png" alt="" class="play">

            </div>
            <!-- <img src="@/assets/sheep/wu.png" alt=""> -->

          </div>
        </div>
      </div>

    </div>
    <div v-if="isShowPop" class="popUp" @click.self="closePop">
      <img src="@/assets/sheep/video.png" alt="">

    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import MyHeader from '@/views/component/MyHeader.vue'
import { firmAll, sheepInfo } from '@/api/connector'
export default {
  name: 'Detection',
  components: {
    MyHeader
  },
  data() {
    return {
      dateVal: '', // 日期
      typeCode: 1,
      isShowPop: false, // 是否放大监控
      itemList: [],
      airInfo: {}, // 羊舍空气质量信息
      option1: {
        isShow: false,
        title: [
          {
            text: '',
            left: 'center',
            top: '38%',
            textStyle: {
              color: '#fff',
              fontSize: 20
            }
          },
          {
            id: 'statistic',
            text: '智能耳标',
            left: 'center',
            top: '52%',
            textStyle: {
              color: '#3CB5FF',
              fontSize: 14
            }
          }
        ],
        series: [
          {
            center: ['50%', '50%'],
            type: 'pie',
            radius: ['50%', '72%'],
            label: {
              show: false

            },
            data: [
              { value: '', name: '智能耳标', itemStyle: { color: '#3CB5FF' }},
              { value: '', name: '', itemStyle: { color: '#0F3159' }}
            ]
          }
        ]
      },
      option2: {
        isShow: false,
        title: [
          {
            text: '',
            left: 'center',
            top: '38%',
            textStyle: {
              color: '#fff',
              fontSize: 20
            }
          },
          {
            id: 'statistic',
            text: '体温正常',
            left: 'center',
            top: '52%',
            textStyle: {
              color: '#3CB5FF',
              fontSize: 14
            }
          }
        ],
        series: [
          {
            center: ['50%', '50%'],
            type: 'pie',
            radius: ['50%', '72%'],
            label: {
              show: false

            },
            data: [
              { value: '', name: '体温正常', itemStyle: { color: '#18D8B1' }},
              { value: '', name: '', itemStyle: { color: '#0F3159' }}
            ]
          }
        ]
      },
      option3: {
        isShow: false,
        title: [
          {
            text: '',
            left: 'center',
            top: '38%',
            textStyle: {
              color: '#fff',
              fontSize: 20
            }
          },
          {
            id: 'statistic',
            text: '运动量正常',
            left: 'center',
            top: '52%',
            textStyle: {
              color: '#3CB5FF',
              fontSize: 14
            }
          }
        ],
        series: [
          {
            center: ['50%', '50%'],
            type: 'pie',
            radius: ['50%', '72%'],
            label: {
              show: false

            },
            data: [
              { value: '', name: '运动量正常', itemStyle: { color: '#6647FF' }},
              { value: '', name: '', itemStyle: { color: '#0F3159' }}
            ]
          }
        ]
      },
      option4: {
        isShow: false,
        title: [
          {
            text: '',
            left: 'center',
            top: '38%',
            textStyle: {
              color: '#fff',
              fontSize: 20
            }
          },
          {
            id: 'statistic',
            text: '受孕羊只',
            left: 'center',
            top: '52%',
            textStyle: {
              color: '#3CB5FF',
              fontSize: 14
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            var relVal = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '单位'
            }
            return relVal
          }
        },
        series: [
          {
            center: ['50%', '50%'],
            type: 'pie',
            radius: ['50%', '72%'],
            label: {
              show: false

            },
            data: [
              { value: '', name: '受孕羊只', itemStyle: { color: '#E9D017' }},
              { value: '', name: '', itemStyle: { color: '#0F3159' }}
            ]
          }
        ]
      }
    }
  },
  computed: {
    currentFirm() {
      return this.itemList.find(ele => ele.id === this.typeCode)
    }
  },
  created() {
    this.dateVal = this.currentDate()
    this.typeCode = this.$route.query.id ? this.$route.query.id : 1
    this.getFirmAll()
  },
  methods: {
    // 侧边导航点击
    changeNav(index) {
      this.typeCode = index
      this.clearInfo()
      this.getInfo()
    },
    // 获取所有企业
    getFirmAll() {
      const self = this
      firmAll().then(res => {
        if (res.status === 0) {
          const datas = res.data.rows
          const itemList = []
          datas.forEach((ele, index) => {
            const item = {
              name: ele.name,
              code: index + 1,
              id: ele.id
            }
            itemList.push(item)
          })
          self.itemList = itemList
        }
      }).then(() => {
        self.getInfo()
      })
    },
    // 获取羊信息
    getInfo() {
      const data = {
        page: 1,
        perPage: 1,
        dataType: 'DATA_TYPE_ENVIRONMENTAL_MONITORING',
        dateType: 'yyyy-MM-dd',
        dataDateStr: this.dateVal,
        objectId: this.currentFirm.id
      }
      sheepInfo(data).then(res => {
        if (res.status === 0) {
          const datas = res.data.rows[0]

          // 情况检测
          this.option1.title[0].text = datas.c_7 + '%'
          this.option1.series[0].data[0].value = datas.c_7
          this.option1.series[0].data[1].value = parseInt(100 - datas.c_7)
          this.option2.title[0].text = datas.c_9 + '%'
          this.option2.series[0].data[0].value = datas.c_9
          this.option2.series[0].data[1].value = parseInt(100 - datas.c_9)
          this.option3.title[0].text = datas.c_11 + '%'
          this.option3.series[0].data[0].value = datas.c_11
          this.option3.series[0].data[1].value = parseInt(100 - datas.c_11)
          this.option4.title[0].text = datas.c_13 + '%'
          this.option4.series[0].data[0].value = datas.c_13
          this.option4.series[0].data[1].value = parseInt(100 - datas.c_13)
          // 羊舍空气质量
          this.airInfo.info1 = datas.c_14
          this.airInfo.info2 = datas.c_15
          this.airInfo.info3 = datas.c_16
          this.airInfo.info4 = datas.c_17
          this.airInfo.info5 = datas.c_18
          this.airInfo.info6 = datas.c_19

          for (let i = 1; i < 5; i++) {
            this[`option${i}`].isShow = true
          }
        }
      })
    },
    handleDate(e) {
      this.clearInfo()
    },
    goBack() {
      this.$router.go(-1)
    },
    // 放大监控
    showPop() {
      this.isShowPop = true
    },
    // 关闭监控
    closePop() {
      this.isShowPop = false
    },
    clearInfo() {
      for (let i = 1; i < 5; i++) {
        this[`option${i}`].isShow = false
      }
      this.airInfo = {}
      this.getInfo()
    },
    currentDate() {
      const nowDate = new Date()
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate()
      }
      return date.year + '-' + date.month + '-' + date.date
    }
  }
}
</script>

<style lang="scss" scoped>
// 环境监测css

.navLeft{
  border: 1px solid #2E5675;
  height: calc(100% - 80px);
  border-top: none;
  overflow-y: auto;
}
.navLeft::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.popUp{
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.6);
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.kong{
  width: 100%;
  display: flex;
  padding: 0 25px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  margin: 10px 0;
  .video{
      width: 49%;
      height: 320px;
      position: relative;
    .img{
      width: 100%;
      height: 100%;
      z-index: 2000;

    }
    .play{
      width: 80px;
      height: 80px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 2002;
    }
  }
  img{

  }
}
.tabs{
    align-items: center;
    padding:0 2%;
    box-sizing: border-box;
    justify-content: space-around;
    margin: 25px 0;
  }
.tab{
  align-items: center;
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  img{
    width: 34px;
    height: 34px;
    margin-right: 18px;
  }

  .tab-html{
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    padding: 3px 0;
    box-sizing: border-box;
    div{
      span{
        margin-right: 10px;
      }
      small{
        font-size: 14px;
        height: 25px;
        color: #BCDDF2;
      }
    }
    div:last-child{
      display: flex;
        align-items: flex-end;
         color: #3CB5FF;
      line-height: 34px;
      text-shadow: 0px 1px 12px rgba(6, 80, 184, 0.41);
      background: linear-gradient(180deg, #FFFFFF 0%, #3CB5FF 100%);
        -webkit-background-clip: text;
        font-size: 32px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      -webkit-text-fill-color: transparent;
    }
    div:first-child{

      color: #E9F7FF;
      font-size: 14px;
    }
  }
}
.tiao{
  width: 2px;
height: 64px;
background: linear-gradient(180deg, rgba(56, 123, 164, 0) 0%, #387BA4 51%, rgba(56, 123, 164, 0) 100%);
}
div[data-bottom] {
   background: url(~@/assets/img/top-img/children-bg.png) no-repeat;
  background-size: 100% 100%;

}
.boxbg {
  background: url(~@/assets/img/customer-bg.png) no-repeat;
  background-size: 100% 100% !important;
}
.timer {
  width: 240px;
  height: 40px;
  color: #ffffff;
  position: relative;
  // margin-bottom: 15px;
  img {
    width: 24px;
    height: 24px;
    margin-left: 40px;
    cursor:pointer;
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -12px;
  }
  ::v-deep .el-input__inner{
    background-color: rgba(0,0,0,0);
    border: none;

    padding: 0;

  }
  ::v-deep .el-date-editor{
    position: absolute;
    right:0;
    top: 0;
     width: 240px;
      height: 40px;

    opacity: 0;
  }

}

.flex-center{
  justify-content: center;
  align-items: center;
}
.item-list {
  // max-height: 86.4%;
  border: 1px solid #155277;
  overflow: auto;
  scroll-behavior: smooth;
}

.item-list::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.item-list::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: #4e5b65;
  // background-image: -webkit-linear-gradient(
  //   45deg,
  //   rgba(255, 255, 255, 0.2) 25%,
  //   transparent 25%,
  //   transparent 50%,
  //   rgba(255, 255, 255, 0.2) 50%,
  //   rgba(255, 255, 255, 0.2) 75%,
  //   transparent 75%,
  //   transparent
  // );
}
.item-list::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  // background: #1a5a7d;
  border-radius: 10px;
}
.h-89{
  margin-top:2vh;
  height: 87vh;
  position: absolute;
  width: 98vw;
  top: 8%;
  margin: 0 1%;
}
.item {
  border-bottom: 1px solid #155277;
  background: rgba(19, 34, 53, 0.8);
}

.checked {
  background: #192f4b;
  border: solid 1px #155277;
}

.app-container {
  width: 100%;
  height: 100%;
}
.echarts {
  width: 100%;
  height: 100%;
}
.charts{
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 15px 0;
}
.chart{
  width: 180px;
  height: 180px;
}
.chart-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 2%;
  box-sizing: border-box;
}

.item-list .item {
  width: 100%;
  text-align: center;
  height: 68px;
  line-height: 68px;
  color: #fff;
}
.title {
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  padding: 20px 0 0 10px;
  box-sizing: border-box;
}

.myfont {
  font-family: myfont;
  font-size: 24px;
  background-image: -webkit-linear-gradient(bottom, #082942, #dff5fe, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 999;
}
.f-l {
  float: left;
}
.f-r {
  float: right;
}

.card {
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-family: myfont;
  border-top: 1px solid  #2D5473;
  border-bottom: 1px solid  #2D5473;
  // position: relative;
  color: rgba(255,255,255,0.5);
  p{
    font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
  }
}
.card.on{
  background: #17354D;
  color: rgba(255, 255, 255, 1);
  border-image: linear-gradient(90deg, rgba(60, 181, 255, 0), rgba(60, 181, 255, 1), rgba(60, 181, 255, 0)) 2 2;
}
.card.bg{
   background: url(~@/assets/img/card.png) no-repeat;
  background-size: 100% 100% !important;
  border: none;
}
</style>
